<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">项目企业警长制信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">项目企业名称</div>
              <div class="value common-value">{{ details.projectCompanyName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">场所分类</div>
              <div class="value common-value">
                {{ get_dict_type(project_company_type, details.projectCompanyType) }}
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">安全负责人</div>
              <div class="value common-value">{{ details.projectUserName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系方式</div>
              <div class="value common-value">{{ details.projectUserMobile || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">地址</div>
              <div class="value common-value">{{ details.addressDetail || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联领导(A角)</div>
              <div class="value common-value">{{ details.leaderOneName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">职务</div>
              <div class="value common-value">{{ details.leaderOnePosition || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联领导(B角)</div>
              <div class="value common-value">{{ details.leaderTwoName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">职务</div>
              <div class="value common-value">{{ details.leaderTwoPosition || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">包联警员</div>
              <div class="value common-value">{{ details.policeUserNames || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">服务记录</div>
        </div>

        <div class="search-group" style="padding: 0">
          <div class="input-wrap">
            <div class="label">服务时间:</div>
            <div class="time-item">
              <start-end-time
                :times="times"
                :showTime="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                @timeChange="timeChange"
                :resetTime="resetTime"
              ></start-end-time>
            </div>
          </div>

          <div class="btn-wrap">
            <a-button class="searchBtn" @click="searchQuery(queryParam.startTime, queryParam.endTime)" type="primary">
              搜索
            </a-button>
            <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
          </div>
        </div>

        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template #time="record">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ record.startTime.split(' ')[0] }} - {{ record.endTime.split(' ')[0] }}</span>
              </template>
              <span>{{ record.startTime.split(' ')[0] }} - {{ record.endTime.split(' ')[0] }}</span>
            </a-tooltip>
          </template>
          <template v-slot:action="records">
            <span class="operation deatil-color" @click="detailHandle(records)">详情 </span>
          </template>
        </a-table>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <serviceDetail ref="serviceDetail" />
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import serviceDetail from './serviceDetail'
import { ajaxGetDictItems } from '@/api/api'
export default {
  name: 'detailModal',
  components: { publicModal, startEndTime, serviceDetail },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      details: {},
      columns: [
        {
          title: '服务名称',
          dataIndex: 'serveTitle',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '服务时段',
          align: 'center',
          width: 400,
          scopedSlots: { customRender: 'time' },
          ellipsis: true,
        },
        {
          title: '服务民(辅)警',
          align: 'center',
          dataIndex: 'policeUserNames',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
    }
  },

  methods: {
    async show(records) {
      this.publicVisible = true
      this.details = records
      this.getDist()
      this.queryParam.projectCompanyId = records.id
      this.searchQuery()
    },

    async getDist() {
      let { result: project_company_type } = await ajaxGetDictItems({ code: 'project_company_type' })
      this.project_company_type = project_company_type
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.startTime = null
        }
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.endTime = null
        }
      }
    },
    detailHandle(records) {
      this.$refs.serviceDetail.show(records)
    },

    handleOk() {
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
</style>
